<script setup>
  import { ref, toRefs } from "vue";
	import { store } from '../js/store.js';

  const props = defineProps({
    msg: String,
    hi: String,
  });

  const count = ref(0);

  //此处必须用toRefs，否则将失去响应式
  const { hi } = toRefs(props);
  //组件暴露自己的属性
  defineExpose({
    count,
  });

  //向父级传递消息
  const emits = defineEmits(['tohost'])
  function sindEmit() {
    emits('tohost', '子集消息');
  }
</script>
<script></script>

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ hi }}</h2>
    <img src="/images/logo.png" alt="">
    <a href="http://www.flashme.cn" target="_blank">my web: flashme.cn</a>
    <button type="button" @click="count++">count is: {{ count }}</button>
    <p>
      Edit
      <code>pages/page.vue</code>
    </p>
    <button @click="sindEmit">向父级传参</button>
    <button @click="store.increment()">修改共用状态</button>
    <i style="font-size: small">鉴于父子级间传递消息的复杂性，推荐使用store管理公共状态，或额外的Pinia</i>
  </div>
</template>

<style scoped>
  a {
    color: #42b983;
  }
</style>